<template>
  <div>
    <!-- 头部 -->
    <div class="painting">
      <div class="container">
        <!-- 头部 -->
        <div class="top">
          <!-- 头部左边 -->
          <div class="left">
            <router-link to="/home" tag="div" class="left fl">
          <i></i>
        </router-link>
            <h5>绘画家园</h5>
          </div>

          <!-- 头部右边 -->
          <div class="right">
            <!-- <h6  @click="logins">登录</h6> -->
            <!-- <h5 @click="registered">注册</h5> -->
          </div>
        </div>
      </div>
    </div>
    <!-- 中部登录验证码 -->
    <div class="painting2" v-show="login" v-if="password">
      <div class="container">
        <!-- 右边 -->
        <div class="left">
          <!-- 顶部 -->
          <div class="tabs">
            <h6 class="icon" @click="passwords">验证码</h6>
            <h6 @click="passwords2">账号密码</h6>
          </div>

          <h6>若您未注册，登录将自动注册新账户</h6>
          <!-- 输入 -->
          <div class="phone">
            <div class="call">86+</div>
            <input type="text" placeholder="请输入手机号" v-model="phone"/>
          </div>

          <!-- 验证码 -->
          <div class="box">
            <input type="text" placeholder="请输入验证码" v-model="thever"/>
            <button @click="createCode" v-if="show">发送验证码</button>
            <button v-if="!show" @click="createCode">{{checkCode}}</button>
          </div>

          <div class="bigbox">
            <h6 @click="getCode">一键登录/注册</h6>
          </div>

        </div>
      </div>
    </div>
    <!-- 中部密码登录 -->
    <div class="painting4" v-show="login" v-if="!password">
      <div class="container">
        <!-- 右边 -->
        <div class="left">
          <!-- 顶部 -->
          <div class="tabs">
            <h6 @click="passwords">验证码</h6>
            <h6 @click="passwords" class="icon">账号密码</h6>
          </div>

          <h6>若您未注册，登录将自动注册新账户</h6>
          <!-- 输入 -->
          <div class="phone">
            <input type="text" placeholder="请输入手机号" v-model="phone"/>
          </div>

          <!-- 密码 -->
          <div class="box">
            <input type="password" placeholder="请输入密码" v-model="password2"/>
          </div>

          <div class="bigbox">
            <h6 @click="getCode">登录</h6>
          </div>

        </div>
      </div>
    </div>
    <!-- 中部注册验证码 -->
    <div class="painting2" v-show="!login" >
      <div class="container">
        <!-- 右边 -->
        <div class="left">
          <!-- 顶部 -->
          <div class="tabs">
            <h6 class="icon2">创建新账号</h6>
          </div>

          <h6>若您未注册，登录将自动注册新账户</h6>
          <!-- 输入 -->
          <div class="phone">
            <div class="call">86+</div>
            <input type="text" placeholder="请输入手机号" v-model="phone"/>
          </div>

          <!-- 验证码 -->
          <div class="box">
            <input type="text" placeholder="请输入验证码" />
            <button @click="createCode" v-if="show">发送验证码</button>
            <button v-if="!show" @click="createCode">{{checkCode}}</button>
          </div>

          <div class="bigbox">
            <h6 @click="getCode">一键登录/注册</h6>
          </div>

        </div>
      </div>
    </div>

    <!-- 结尾 -->
    <div class="painting3">
      <div class="container">
        <h6>Copyright © 2019 涂鸦王国</h6>
      </div>
    </div>
  </div>
</template>

<script>
import { getJsonData } from "../api/home.js";
export default {
  data() {
    return {
      show:true,
      login: true,
      password:true,
      //验证码/验证码
      thever:null,
      // 输入手机号
      phone:null,
      //验证码
      verification:null,
      //创建出来的验证码
      checkCode:null,
      //密码验证
      password2:null,
      //我的个人信息
      minemessage:''
    };
  },

  methods:{
    //登录验证
    logins () {
      this.login=true
    },
    //注册验证
    registered () {
      this.login=false
    },
    //登录密码
    passwords(){
      this.password=true
    },
    passwords2(){
      this.password=false
    },
    //账号密码送入localstrogal
    getCode() {
      //1.验证手机号
      let reg =/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
      
      // let pw =/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
      //3.验证验证码
      // let yz = /^[0-9]\w{4}$/;

      // console.log(reg.test(this.phone));
      // console.log(pw.test(this.password));

      if (!reg.test(this.phone)) {
        //不正确就提示
        // this.$toast("请输入正确格式的手机号");
        this.$message.error('您输入的手机号有误哦~');
        return;
      } else if (this.checkCode!=this.thever) {
        // this.$toast("输入验证码有误");
        this.$message.error('您输入的输入验证码有误~');
      } else {
        //正确就跳转
        this.$router.push("/home");
        this.minemessage[0].phone=this.phone
        // this.$set(this.minemessage,"phone",this.phone);
        console.log(this.minemessage.phone,this.phone);
        // window.localStorage.setItem("token", "token值");
        window.localStorage.setItem("userId", this.phone);
        window.localStorage.setItem("minemessage",JSON.stringify(this.minemessage));
         this.$message({
          message: '登陆成功',
          type: 'success'
        });


  

      }
    },
    //创造验证码
    createCode() {
      this.show=false
      let code = ""; //声明一个空字符串用于后面赋值
      const codeLength = 5; //验证码的长度
      const random = [0,1,2,3,4,5,6,7,8,9]; //随机数的取值范围
      for(let i=0;i<codeLength;i++){
        //循环遍历长度
        let index=Math.floor(Math.random()*9);
        code +=random[index]
      }
      this.checkCode=code

    },
  },
  created(){
    getJsonData().then((data)=>{
      console.log(data.minemessage);
      this.minemessage=data.minemessage
    })
  }
  
};
</script>

<style lang="scss" scoped>
@import "../assets/css/base.css";
.painting {
  border-bottom: #eceeed 1px solid;
}
.top {
  display: flex;
  justify-content: space-between;
  height: 55px;
  align-items: center;
}
.top .left {
  display: flex;
}
.top .left i {
  display: block;
  background-image: url(../assets/img/smlogo/painting1.png);
  width: 133px;
  height: 35px;
  background-size: 133px 35px;
  margin-right: 22px;
  position: relative;
  background-repeat: no-repeat;
}
.top .left i::after {
  display: block;
  content: "";
  width: 1px;
  height: 22px;
  background-color: #dedede;
  position: absolute;
  right: -22px;
  top: 0px;
}
.top .left h5 {
  margin-left: 22px;
  font-size: 16px;
  font-weight: bolder;
}
.top .right {
  display: flex;
}
.top .right h6 {
  margin-right: 17px;
  font-size: 15px;
  position: relative;
}
.top .right h6::after {
  display: block;
  content: "";
  width: 1px;
  height: 20px;
  background-color: #e1e1e3;
  position: absolute;
  top: 0px;
  right: -17px;
}
.top .right h5 {
  margin-left: 14px;
  font-size: 15px;
}
.painting2 {
  background-color: #f8f9fb;
  border-bottom: 1px solid #eceded;
}
.painting2 > .container {
  display: flex;
  justify-content: end;
  background-color: #f8f9fb;
}
.painting2 .container .left {
  display: flex;
  flex-direction: column;
  margin-top: 44px;
  border: 1px solid #f0f0f2;
  background-color: #ffffff;
  padding: 0px 42px;
  margin-bottom: 42px;
  box-shadow: 0px 0px 8px 0px #e4e4e4;
}
.painting2 .container .left .tabs {
  display: flex;
  height: 57px;
  align-items: center;
  position: relative;
}
.painting2 .container .left .tabs::after {
  display: block;
  content: "";
  height: 1px;
  width: 389px;
  background-color: #f2f2f4;
  position: absolute;
  bottom: 0px;
  left: -42px;
}
.painting2 .container .left .tabs h6 {
  flex: 1;
  text-align: center;
  font-size: 16px;
  color: #96939c;
  width: 150px;
}
.painting2 .container .left .tabs h6.icon {
  color: #33402c;
  font-weight: bolder;
}
.painting2 .container .left .tabs h6.icon2 {
  color: #33402c;
  font-weight: bolder;
}
.painting2 .container .left .tabs h6.icon::after {
  display: block;
  content: "";
  height: 1px;
  width: 150px;
  background-color: #0b0b0b;
  position: absolute;
  bottom: 1px;
  z-index: 1px;
}
.painting2 .container .left > h6 {
  height: 64px;
  line-height: 64px;
  color: #939393;
  font-size: 14px;
}
.painting2 .container .left .phone {
  flex: 1;
  display: flex;
  height: 38px;
  align-items: center;
}
.painting2 .container .left .phone .call {
  border-top: 1px solid #e1e1e3;
  border-left: 1px solid #e1e1e3;
  border-bottom: 1px solid #e1e1e3;
  border-right: 1px solid #e1e1e3;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  height: 38px;
  line-height: 38px;
  color: #61666a;
  padding-left: 22px;
  padding-right: 22px;
}
.painting2 .container .left .phone input {
  outline: none;
  border: none;
  border-top: 1px solid #e1e1e3;
  border-right: 1px solid #e1e1e3;
  border-bottom: 1px solid #e1e1e3;
  padding-left: 15px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  height: 38px;
  width: 100%;
}
.painting2 .container .left .box{
  display: flex;
  margin-top: 28px;
}
.painting2 .container .left .box input{
  outline: none;
  border: 1px solid #e1e1e3;
  border-radius: 5px;
  height: 36px;
  flex: 1;
  margin-right: 8px;
  padding-left: 15px;
}
.painting2 .container .left .box button{
  outline: none;
  border: 1px solid #38393d;
  border-radius: 5px;
  background-color: #ffffff;
  padding: 0px 12px;

}
.painting2 .container .left .bigbox{
  margin-top: 30px;
  width: 304px;
  height: 42px;
  line-height: 42px;
  background-color: #353a40;
  border-radius: 5px;
  text-align: center;
  margin-bottom: 45px;
}
.painting2 .container .left .bigbox h6{
  color: #ffffff;
}
.painting3{
  margin-top: 23px;
}
.painting3 .container h6{
  color: #979893;
}
.painting4 {
  background-color: #f8f9fb;
  border-bottom: 1px solid #eceded;
}
.painting4 > .container {
  display: flex;
  justify-content: end;
}
.painting4 .container .left {
  display: flex;
  flex-direction: column;
  margin-top: 44px;
  border: 1px solid #f0f0f2;
  background-color: #ffffff;
  padding: 0px 42px;
  margin-bottom: 42px;
  box-shadow: 0px 0px 8px 0px #e4e4e4;
}
.painting4 .container .left .tabs {
  display: flex;
  height: 57px;
  align-items: center;
  position: relative;
}
.painting4 .container .left .tabs::after {
  display: block;
  content: "";
  height: 1px;
  width: 389px;
  background-color: #f2f2f4;
  position: absolute;
  bottom: 0px;
  left: -42px;
}
.painting4 .container .left .tabs h6 {
  flex: 1;
  text-align: center;
  font-size: 16px;
  color: #96939c;
  width: 150px;
}
.painting4 .container .left .tabs h6.icon {
  color: #33402c;
  font-weight: bolder;
}
.painting4 .container .left .tabs h6.icon2 {
  color: #33402c;
  font-weight: bolder;
}
.painting4 .container .left .tabs h6.icon::after {
  display: block;
  content: "";
  height: 1px;
  width: 150px;
  background-color: #0b0b0b;
  position: absolute;
  bottom: 1px;
  z-index: 1px;
}
.painting4 .container .left > h6 {
  height: 64px;
  line-height: 64px;
  color: #939393;
  font-size: 14px;
}
.painting4 .container .left .phone {
  flex: 1;
  display: flex;
  height: 38px;
  align-items: center;
}
.painting4 .container .left .phone input {
  outline: none;
  border: none;
  border-top: 1px solid #e1e1e3;
  border-left: 1px solid #e1e1e3;
  border-right: 1px solid #e1e1e3;
  border-bottom: 1px solid #e1e1e3;
  padding-left: 15px;
  border-radius: 5px;
  height: 38px;
  width: 100%;
}
.painting4 .container .left .box{
  display: flex;
  margin-top: 28px;
}
.painting4 .container .left .box input{
  outline: none;
  border: 1px solid #e1e1e3;
  border-radius: 5px;
  height: 36px;
  flex: 1;
  padding-left: 15px;
}
.painting4 .container .left .box button{
  outline: none;
  border: 1px solid #38393d;
  border-radius: 5px;
  background-color: #ffffff;
  padding: 0px 12px;

}
.painting4 .container .left .bigbox{
  margin-top: 30px;
  width: 304px;
  height: 42px;
  line-height: 42px;
  background-color: #353a40;
  border-radius: 5px;
  text-align: center;
  margin-bottom: 45px;

}
.painting4 .container .left .bigbox h6{
  color: #ffffff;
  font-size: 15px;
}
</style>